<template>
  <div class="advancedSetting" ref="advancedSettingRef">
    <!-- 标题区域 -->
    <van-sticky ref="stickyRef">
      <header-component :title="data.title" :showAdd="false" :titleSlide="titleSlide"></header-component>
    </van-sticky>
    <!-- 主体内容区 -->
    <section>
      <!-- 清除缓存 -->
      <tagList @click="clearCache" class="tag-list" :showRight="true" :content="data.clearCache"></tagList>
      <!-- 重建本地数据库 -->
      <tagList @click="rebuildLocalDatabase" class="tag-list" :content="data.rebuildDatabase"></tagList>
      <p>当数据或同步遇到异常，可以使用这个选项删除本地数据库，YBox会从服务端重新下载一次完整的数据</p>
      <!-- 语言 -->
      <tagList @click="SelectLanguage" class="tag-list" :content="data.language"></tagList>
      <!-- 弹窗 -->
      <operate-box :is-show="isShowOverlay" @handle-close="handleClose">
        <operate :menu="menu" :title="title"></operate>
      </operate-box>
    </section>
  </div>
</template>

<script setup name="personalityPreference">
import headerComponent from "@/components/header/index.vue";
import operateBox from "@/components/operateBox/index.vue";
import operate from "@/components/operateBox/operate.vue"
import tagList from '@/components/list/tagList.vue';
import { ref, watch, reactive } from "vue";
import useScroll from "@/hooks/useScroll";
import {Dialog} from "vant"
import {useScrollWatch,useScrollWatch2} from "@/hooks/userScrollWatch.js";
import Operate from "@/components/operateBox/operate.vue";
// data
const data = new reactive({
  // title
  title: '高级设置',
  isShowDialog: true,
  // contentList
  clearCache: [{url: '', icon: 'fa-solid fa-list', iconColor: '#f64f59', name: '清除缓存', type: '', typeName: '', value: '', label: '', info: ''}],
  rebuildDatabase: [{url: '', icon: 'iconfont icon-Web', iconColor: '#f64f59', name: '重建本地数据库', type: '', typeName: '', value: '', label: '', info: ''}],
  language: [{url: '', icon: 'fa-solid fa-clipboard-list', iconColor: '#f64f59', name: '语言', type: '', typeName: '', value: '', label: '', info: ''}],
})
// 菜单
const menu = new ref();
const title = new ref();
// 是否显示
const isShowOverlay = ref(false);
// 关闭弹窗
const handleClose = (value) => {
  console.log(value)
  isShowOverlay.value = false
}
// 清除缓存
const clearCache = (value) =>{

}
// 重建本地数据库
const rebuildLocalDatabase = (value) =>{

}
// 语言
const SelectLanguage = (value) =>{
  title.value = "剪贴板自动收藏提示"
  menu.value = [
    { url: "/home", iconfont: "iconfont icon-lianjie1", iconColor: "", text: "跟随系统" },
    { url: "/home", iconfont: "iconfont icon-guidang", iconColor: "", text: "English" },
    { url: "/home", iconfont: "iconfont icon-shanchu", iconColor: "red", text: "简体中文" },
  ]
  isShowOverlay.value = true
}
const checked = ref(false);
// 标题动画相关的操作

const advancedSettingRef = ref();
const stickyRef = ref();
let titleSlide = useScrollWatch(advancedSettingRef)
useScrollWatch2(titleSlide,stickyRef)
</script>

<style lang="less" scoped>
.advancedSetting {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 160px;
  .userInfo{
    position: relative;
    top: 40px;
    padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
    background-color: var(--van-cell-background);
    border-radius: var(--card-border-radius);
    box-shadow: 0 0 2px #fff, 0 0 4px #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .userName{
      flex: 1;
      position: relative;
      left: 6%;
      span{
        position: relative;
        left: 8px;
      }
    }
  }
  .box{
    position: relative;
    top: 50px;
  }
  section{
    padding: 0 12px;
    p{
      padding: 10px;
      position: relative;
      top: 38px;
      font-size: 12px;
      color: var(--primary-font-color);
    }
  }
}
.advancedSetting::-webkit-scrollbar {
  display: none;/*隐藏滚动条*/
}
.tag-list{
  position: relative;
  top: 40px;
}
</style>

